<!doctype html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <meta
            name="viewport"
            content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0"
    >
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <title>Web Worker</title>
</head>
<body>
<button id="compute">获取cellsModel</button>
<button id="copy">复制1000个cellsModel后存储到页面</button>
<script>
    const worker = new Worker("backservice.js", {
        type: "module",
        name: "customWorker"
    });
    worker.onmessage = function(ev) {
        const {functionName, result} = ev.data;
    }
    function workerFunctionCall(fName) {
        return function(...args) {
            return new Promise((resolve, reject) => {
                worker.postMessage({
                    functionName: fName,
                    args
                });
                const handleMessage = (ev) => {
                    if (ev.data.functionName === fName) {
                        worker.removeEventListener("message", handleMessage);
                        resolve(ev.data.result);
                    }
                }
                worker.addEventListener("message", handleMessage);
            });
        }
    }
    const getCellsModel = workerFunctionCall("getCellsModel");
    const storeBaseCellsModel = workerFunctionCall("storeBaseCellsModel");
    const batchCopyCellsModel = workerFunctionCall("batchCopyCellsModel");
</script>
<script>
    const store = new Map();
    const state = {
        baseCM: null,
    };
    const b = document.querySelector("#compute");
    const copy = document.querySelector("#copy");
    b.addEventListener("click", async function(e) {
        const cm = await getCellsModel(1,2,3);
        console.log("前台获取的cellsModel:", cm);
        state.baseCM = cm;
        storeBaseCellsModel(cm);
    });
    copy.addEventListener("click", function() {
        batchCopyCellsModel(1000);
    })
</script>
</body>
</html>